<template>
  <view class="page">
		<view class="top">
			<text>托盘：</text>
			<input
				type="text"
				v-model="sPalletNo"
				@input="replaceInput()"
			/>
		</view>
		<view class="top">
			<text>条码：</text>
			<input
				type="text"
				v-model="sBarCode"
				@input="replaceInput()"
			/>
		</view>
		<view class="table">
			<uni-table border stripe emptyText="暂无更多数据" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="100">类型</uni-th>
					<uni-th width="100">面料名称</uni-th>
					<uni-th width="100">面料编码</uni-th>
					<uni-th>数量</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="item in list">
					<uni-td>{{ item.sOperateType }}</uni-td>
					<uni-td>{{ item.smaterial_name }}</uni-td>
					<uni-td>{{ item.smaterial_code }}</uni-td>
					<uni-td>{{ item.nQty }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		
		<view class="bottom padding radius">
			<view class="num">
				<text>当前托盘: 1001个</text>
				<text>1,0 (0,0)</text>
			</view>
			<view class="num">
				<text>总托盘: 1个</text>
				<text>(总) 0个 (0,0)</text>
			</view>
			<view class="btn">
				<button size="default" @click="save" type="primary">保存</button>
				<button size="default" type="warn">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
	import fabricService from "@/api/fuzhuang/fabric";
  import { mapState } from 'vuex';
	export default {
		data() {
			return {
				sBarCode: "",
				sPalletNo: "",
				timer: null,
				list: []
			}
		},
		computed: { ...mapState({
			 userInfo: (state) => state.user.userInfo
			}),
		},
		methods: {
			replaceInput() {
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.getInitData();
					this.timer = null;
				},1000);
			},
			getInitData() {
				if (this.sBarCode.trim() === "" || this.sPalletNo.trim() === "") {
					uni.showToast({
						title: "请扫描",
						duration: 2000,
						icon: "error"
					});
					return false;
				};
				uni.showLoading({
					title: '加载中'
				});
				const params = {
					sTypeCode: "ST_IN",
					sBarCode: "2501130003",
					sPalletNo: "22",
					sUserNo: "admin"
				};
				fabricService.list(params).then(res => {
					this.list.push(res[0]);
					uni.hideLoading();
				}).catch(error => {
					uni.hideLoading();
				})
			},
			save() {
				console.log(this.userInfo);
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding-bottom: 260rpx;
}
.top {
	width: 750rpx;
	padding: 0 40rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	text {
		color: black;
		font-size: 16px;
		width: 100rpx;
	}
	input {
		flex: 1;
		border-bottom: 1px solid #ccc;
	}
}

.table {
	margin-top: 20rpx;
}

.bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	box-shadow: 0 1px 4px #f9f9f9, 1px 1px 40px rgba(0,0,0,.06);
	height: 260rpx;
	.num {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.btn {
		display: flex;
		button {
			flex: 1;
			margin: 0 20rpx;
		}
	}
}
</style>